<template>
    <div class="hello">
        <h1>{{ title }}</h1>
        <el-input v-model="input" :placeholder="$t('lang.login.PLEASE')"></el-input>
        <div class="block">
            <span class="demonstration">默认</span>
            <el-date-picker
            v-model="value1"
            type="date"
            placeholder="选择日期">
            </el-date-picker>
        </div>
        <p>通过全局store获取值</p>
        <input type="text" v-model="count">
        <button @click="getNum()">状态增加</button>
        <div>
            <span>{{ watchDataChange }}</span>
            <p>{{ time | dateFormate }}</p> <!-- 2016-01-01 -->
        </div>
        <span>{{ filterStr | dateServer }}</span>
        <button @click="$store.dispatch('switch_console')">触发store中的异步方法</button>
        <el-button type="text" @click="dialogVisible">点击打开 Dialog</el-button>
        <dialog_ :isVisible="isShowDig"></dialog_>
    </div>
</template>

<script>
//此函数的作用是在月份、日期、小时等小于10时在前面补
import dialog_ from './dialog'
import { mapMutations } from 'vuex'
export default {
    data() {
        return {
            title: "this is header",
            input: "",
            count: 0,
            time: new Date(),
            filterStr: "k,o,b,e,b,r,i,y,e,n,t",
            isShowDig: false,
            value: {
                name: 'james',
                age: 29
            },
            value1: ''
        };
    },
    created() {
        //console.log(myFilter)
        // this.count = this.$store.state.count;
    },
    mounted() {

    },
    components: {
        dialog_
    },
    computed: {
        watchDataChange() {
            let passValue = "";
            passValue = this.$store.state.passValue;
            return passValue;
        }
    },
    methods: {
        ...mapMutations([
            'setValue'
        ]),
        getNum: function() {
            this.$store.commit("increment");
            this.count = this.$store.state.count;
        },
        dialogVisible: function() {
            this.isShowDig = true;
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
    background-color: antiquewhite;
    height: auto;
    width: 100%;
    line-height: 50px;
}
</style>